<template>
  <div class="map_position">
    <!-- 地图 -->
    <div id="mapContainer" style="width: 100%; height: 500px"></div>

    <div class="map_position-search">
      <!-- 搜索框 -->
      <div>
        <el-input
          v-model="inputValue"
          placeholder="请输入地点名称"
          @input="searchKeyWord"
          id="tipinput"
          style="width: 240px"
        />

        <el-select
          v-model="coverage"
          clearable
          placeholder="请选择距离"
          style="width: 240px; margin-left: 5px"
          size="default"
          @change="getCoverageC"
        >
          <el-option
            v-for="item in distanceOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span>{{ item.district }}</span> <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </div>
      <!-- 搜索结果展示 -->
      <div class="map_position-search-infinite" v-if="showsearchResult">
        <div
          class="map_position-search-infinite-list"
          v-for="(item, i) in poiList"
          :key="i"
          @click="markerResult(item)"
        >
          <div>
            {{ item.name.substring(0, 13) }}
            {{ item.name.length >= 13 ? "..." : "" }}
          </div>

          <el-tooltip
            class="item"
            effect="dark"
            :content="item.address"
            placement="top"
          >
            <div style="font-size: 13px; color: rgba(25, 31, 37, 0.56)">
              {{ item.address.substring(0, 18) }}
              {{ item.address.length >= 18 ? "..." : "" }}
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="gdDialogCom">
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const map = ref(null); //地图
const inputValue = ref(""); //搜索关键字
const showsearchResult = ref(false); //展示搜索结果
const poiList = ref([]); //搜索结果列表
const autoCompleteComponent = ref(null);
const placeSearchComponent = ref(null);
const coverage = ref(300);
const distanceOption = [
  {
    id: 100,
    name: "100米",
  },
  {
    id: 200,
    name: "200米",
  },
  {
    id: 300,
    name: "300米",
  },
  {
    id: 400,
    name: "400米",
  },
  {
    id: 500,
    name: "500米",
  },
  {
    id: 600,
    name: "600米",
  },
  {
    id: 700,
    name: "700米",
  },
  {
    id: 800,
    name: "800米",
  },
  {
    id: 900,
    name: "900米",
  },
  {
    id: 1000,
    name: "1000米",
  },
  {
    id: 2000,
    name: "2000米",
  },
  {
    id: 3000,
    name: "3000米",
  },
];

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "8081606dcae9578763f8339b843f6d67",
  };

  AMapLoader.load({
    key: "755572ca458d415727a999078c4a5c30",
    version: "2.0",
    plugins: [
      "AMap.ToolBar",
      "AMap.Scale",
      "AMap.Geolocation",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Geocoder",
      "AMap.CitySearch",
    ],
  })
    .then((AMap) => {
      map.value = new AMap.Map("mapContainer", {
        zoom: 15,
        center: [104.063403, 30.568744], //地图中心位置
      });

      // 给地图添加点
      // marker.value = new AMap.Marker({
      //   position: props.position, //位置
      // });
      // map.value.add(marker.value); //添加到地图

      // // 监听地图点击事件
      // map.value.on("click", (e) => {
      //   // e.lnglat 获取点击的经纬度
      //   const { lng, lat } = e.lnglat;
      //   form.value.lng = lng;
      //   form.value.lat = lat;
      //   map.value.remove(marker.value); //删除原来的点
      //   // 添加新点击的点
      //   marker.value = new AMap.Marker({
      //     position: [lng, lat], //位置
      //   });
      //   map.value.add(marker.value); //添加到地图
      //   emit("get-position", form.value);
      // });

      mapSearchInit();
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
});

// POI搜索
const mapSearchInit = () => {
  let autoOptions = {
    input: "tipInput",
  };
  autoCompleteComponent.value = new AMap.AutoComplete(autoOptions);
  // 注册placeSearch组件
  placeSearchComponent.value = new AMap.PlaceSearch();
};

//根据输入内容查询
const searchKeyWord = () => {
  placeSearchComponent.value.search(
    inputValue.value,
    function (status, result) {
      if (status === "complete" && result.info === "OK") {
        showsearchResult.value = true;
        poiList.value = result.poiList.pois;
        console.log("poiList.value", poiList.value);
      } else {
        showsearchResult.value = false;
        poiList.value = [];
      }
    }
  );
};

//选择搜索的内容
const markerResult = (data) => {
  showsearchResult.value = false;
  inputValue.value = data.name;

  // map.value.remove(marker.value); //删除原来的点
  // marker.value = new AMap.Marker({
  //   position: [Number(data.location.lng), Number(data.location.lat)],
  // });
  // map.value.add(marker.value); // 添加点标志

  showsearchResult.value = true;
  poiList.value = [];
  poiList.value = [data];

  setTimeout(() => {
    map.value.setCenter(data.location);
    map.value.setZoom(15);
  }, 50);

  // form.value.lng = Number(data.location.lng);
  // form.value.lat = Number(data.location.lat);
  // emit("get-position", form.value);
};

// 设置范围距离
const getCoverageC = () => {};
</script>

<style scoped lang="scss">
.map_position {
  position: relative;

  &-search {
    // width: 350px;
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;

    &-infinite {
      width: 268px;
      background-color: #fefefe;
      border: 1px solid #d1d1d1;
      margin-top: 8px;

      &-list {
        width: 268px;
        height: 50px;
        padding: 8px 18px;
        font-size: 15px;
        color: #191f25;
        border-bottom: 1px solid rgba(17, 31, 44, 0.08);
        cursor: pointer;
      }
    }
  }
}

.infinite-list {
  width: 100%;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
